
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <!-- 自定义CSS样式 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/assets/css/reset.css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.7.1.min.js"></script>
    <script>
        function loginIn() {
            //表单验证
            if(validateForm()){
                var username = $("#exampleInputEmail1").val();
                var password = $("#exampleInputPassword1").val();
                var role = $("#role").val();
                let formData = new FormData();
                formData.append("userName", username);
                formData.append("password", password);
                formData.append("role", role);
                $.ajax({
                    url: "${pageContext.request.contextPath}/loginIn",
                    headers: {
                        "Cache-Control": "no-cache",
                        "Pragma": "no-cache"
                    },
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function (data) {
                        alert(data.msg);
                        if(data.flag===1){
                            window.location.href = "${pageContext.request.contextPath}/main"
                        }
                    }
                });
            }


        }
        document.addEventListener('keydown', (event) => {
            // 判断是否按下 Enter 键
            if (event.keyCode === 13) {
                if(validateForm()){
                    loginIn()
                }
            }
        });
    </script>
</head>

<body>
<form style="width: 400px;margin:150px auto 0 auto;">
    <div class="mb-3">
        <label for="exampleInputEmail1"
               class="form-label"
               name="username">用户名</label>
        <input type="text"
               class="form-control"
               id="exampleInputEmail1"
               aria-describedby="emailHelp">
        <div id="emailHelp"
             class="form-text"></div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1"
               class="form-label"
               name="password">密码</label>
        <input type="password"
               class="form-control"
               id="exampleInputPassword1">
    </div>
    <div class="mb-3">
        <label for="role"
               class="form-label"
               name="role">角色</label>
        <select class="form-select"
                id="role"
                aria-label="Default select example">
            <option value="0" selected>管理员</option>
            <option value="1">采购员</option>
            <option value="2">销售员</option>
            <option value="3">供应商</option>
            <option value="3">客户</option>
        </select>
    </div>

    <div class="mb-3 form-check">
        <input type="checkbox"
               class="form-check-input"
               id="exampleCheck1">
        <label class="form-check-label"
               for="exampleCheck1">记住我</label>
    </div>
    <button type="button"
            class="btn btn-primary"
            onclick="loginIn()">登录
    </button>
</form>


<script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<script>
    function validateForm() {
        var username = document.getElementById("exampleInputEmail1").value;
        var password = document.getElementById("exampleInputPassword1").value;

        if (username === "") {
            alert("用户名不能为空");
            return false;
        }

        if (password === "") {
            alert("密码不能为空");
            return false;
        }

        return true;
    }
</script>
</body>

</html>
